import wechatValidate from 'wechat-validate'
Page({
  behaviors: [wechatValidate],
  data: {
    currentDate: +new Date(),
    houseLayerVisible: false,
    repairLayerVisible: false,
    dateLayerVisible: false,
    houseList: [],
    repairItem: [],
    attachment: [], // 图片字段
    houseInfo: '', // 选中的房屋名称  这个字段是为了展示的
    houseId: '', // 选中的房屋id 这个字段是要进行提交的
    repairItemId: '', // 选中的维修项目id 这个字段是要进行提交的
    repairItemName: '', // 选中的维修项目名称  这个字段是为了展示的
    appointment: '', // 选中的预约日期
    mobile: '',
    description: ''
  },

  rules: {
    houseId: [{
      required: true,
      message: '请选择报修的房屋'
    }],
    repairItemId: [{
      required: true,
      message: '请选择报修的项目'
    }],
    mobile: [{
      required: true,
      message: '请填写手机号'
    }, {
      pattern: /^1[3-9]\d{9}$/,
      message: '请填写正确格式的手机号'
    }],
    appointment: [{
      required: true,
      message: '请选择报修预约日期'
    }],
    description: [{
      required: true,
      message: '请填写报修的问题描述'
    }]
  },

  onLoad({
    id
  }) {
    id && this.getDetail(id)
    this.getHouse()
    this.getRepairItem()
  },
  // 拿着id获取报修信息
  async getDetail(id) {
    const res = await wx.http.get(`/repair/${id}`)
    this.setData({
      ...res.data
    })
  },
  // ---------------------------------------------
  // 获取审核通过的房屋
  async getHouse() {
    const res = await wx.http.get('/house')
    this.setData({
      houseList: res.data
    })
  },
  // 选中的房屋
  selectHouse(ev) {
    this.setData({
      houseInfo: ev.detail.name,
      houseId: ev.detail.id
    })
  },
  // 展示报修房屋动作面板
  openHouseLayer() {
    this.setData({
      houseLayerVisible: true
    })
  },
  // 隐藏报修房屋的动作面板
  closeHouseLayer() {
    this.setData({
      houseLayerVisible: false
    })
  },
  // -----------------------------------------------------
  // 展示维修项目展示动作面板
  openRepairLayer() {
    this.setData({
      repairLayerVisible: true
    })
  },
  // 隐藏维修项目展示动作面板
  closeRepairLayer() {
    this.setData({
      repairLayerVisible: false,
    })
  },
  // 获取维修项目列表
  async getRepairItem() {
    const res = await wx.http.get('/repairItem')
    this.setData({
      repairItem: res.data
    })
  },
  // 记录选中的维修的项目
  selectRepairItem(ev) {
    // console.log(ev.detail);
    this.setData({
      repairItemId: ev.detail.id,
      repairItemName: ev.detail.name
    })
  },
  // -------------------------------------------
  //  展示上门维修日期的弹出层
  openDateLayer() {
    this.setData({
      dateLayerVisible: true
    })
  },
  // 隐藏上门维修日期的弹出层
  closeDateLayer() {
    this.setData({
      dateLayerVisible: false
    })
  },
  // 选择预约日期
  selectDate(ev) {
    // console.log(ev.detail);
    this.setData({
      appointment: wx.utils.formatTime(ev.detail),
      dateLayerVisible: false
    })
  },
  // 移除图片
  deleteImg(ev) {
    // console.log('移除图片', ev.detail.index);
    this.data.attachment.splice(ev.detail.index, 1)
    this.setData({
      attachment: this.data.attachment
    })
  },
  // 文件读取完毕
  afterRad(ev) {
    // console.log(ev.detail.file.tempFilePath);
    wx.showLoading({
      title: '正在上传',
      mask: true
    })
    // 上传后预览
    wx.uploadFile({
      url: wx.http.baseURL + '/upload',
      filePath: ev.detail.file.tempFilePath,
      name: 'file',
      header: {
        Authorization: `Bearer ${getApp().token}`
      },
      success: (res) => {
        this.data.attachment.push(JSON.parse(res.data).data)
        this.setData({
          attachment: this.data.attachment
        })
      },
      complete: () => {
        wx.hideLoading()
      }
    })
  },
  // 提交报修
  async goList() {
    // 1. 校验
    if (!this.validate()) return
    // 2. 发送请求
    // console.log(this.data);
    const {
      houseId,
      repairItemId,
      mobile,
      appointment,
      description,
      attachment,
      id
    } = this.data
    await wx.http.post('/repair', {
      houseId,
      repairItemId,
      mobile,
      appointment,
      description,
      attachment,
      id
    })
    // 3. 提示 
    wx.utils.toast('新增报修成功')
    // 3. 跳转到报修列表
    wx.reLaunch({
      url: '/repair_pkg/pages/list/index',
    })
  },
})